<template>
	<view>
		<image :src="data.thumb" class="thumb" />
		<view class="title">{{ data.title }}</view>
		<view class="type">
			<view @click="targetDepartmentDetails">
				<image src="https://new.kuxia.top/uploads/image/20220930/2de6ad961dc5002310745f42a7e520d7.png" />
				<text>科室介绍</text>
			</view>
			<view @click="targetDoctorIndex">
				<image src="https://new.kuxia.top/uploads/image/20220930/2de6ad961dc5002310745f42a7e520d7.png" />
				<text>医生介绍</text>
			</view>
		</view>
		<view class="main">
			<view class="details">
				<view>健康宣教</view>
				<view @click="targetInformationList">
					<text>更多</text>
					<image src="https://new.kuxia.top/uploads/image/20220930/42db1de5be8eddef523c822197a648fa.png" />
				</view>
			</view>
			<view class="list" v-for="(item, index) in list" @click="targetInformationDetails" :data-data="item"
				v-if="index < 2">
				<view>
					<view>
						<view>{{ item.description }}</view>
						<view>{{ item.description }}</view>
					</view>
					<view>{{ item.createtime }}</view>
				</view>
				<view>
					<image :src="item.thumb" />
					<view>{{ item.number }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	information
} from '../../request/index.js'
import baseUrl from '../../request/baseUrl.js'
export default {
	data() {
		return {
			data: '',
			list: [],
		}
	},
	onLoad() {
		this.callback();
	},
	methods: {
		callback() {
			console.log(uni.getStorageSync('departmentIntr'));
			this.data = uni.getStorageSync('departmentIntr');
			information().then(res => {
				this.list = res.data.list.map(item => {
					item.thumb = baseUrl + item.thumb;
					return item
				});
				console.log(this.list);
			})
		},
		targetInformationDetails(event) {
			uni.setStorageSync('informationDetails', event.currentTarget.dataset.data)
			uni.navigateTo({
				url: '/pages/informationDetails/index'
			})
		},
		targetInformationList() {
			uni.navigateTo({
				url: '/pages/informationList/index'
			})
		},
		targetDepartmentDetails() {
			uni.navigateTo({
				url: '/pages/departmentDetails/index?data=' + JSON.stringify(this.data)
			})
		},
		targetDoctorIndex() {
			uni.navigateTo({
				url: '/pages/doctorIndex/index?id=' + this.data.id
			})
		}
	},
	onPullDownRefresh() {
		setTimeout(() => {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 400)
			this.callback();
		}, 300)
	}
}
</script>

<style lang="scss">
page {
	background: #eaebef;
}

$themeColor: white;

.thumb {
	height: 22vh;
	width: 100%;
	display: block;
}

.title,
.type,
.main {
	background: $themeColor;
}

.title {
	height: 7vh;
	width: 100%;
	font-size: 21px;
	padding: 0 2.5%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.type {
	margin: 2.25vh 0;
	height: 14vh;
	display: grid;
	grid-template-columns: repeat(2, 1fr);

	>view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		>image {
			width: 41.5px;
			height: 41.5px;
			background-color: #1677ff;
			padding: 5px;
			box-sizing: border-box;
			border-radius: 50%;
			margin-bottom: .5vh;
		}
	}
}

.main {
	height: 100vh - 22vh - 7vh -14vh -4.5vh;

	>.details {
		display: flex;
		justify-content: space-between;
		padding: 2vh 3.5% 1vh 3.5%;
		box-sizing: border-box;
		border-bottom: solid 1px #f3f3f3;

		>view {
			display: flex;
			align-items: center;

			&:first-child {
				border-left: 1.25vw solid #1777ff;
				font-size: 19px;
				padding-left: 2vw;
			}

			&:last-child {
				display: flex;
				align-items: center;


				>text {
					transform: translateX(.35em);
					font-size: 15px;
				}

				>image {
					height: 80%;
					width: 1em;
				}
			}
		}
	}

	>.list {
		border-bottom: solid 1px #f3f3f3;
		padding: 2vh 3.5%;
		display: flex;
		justify-content: space-between;

		>view {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			&:first-child {

				>view {
					&:first-child {

						>view {
							&:first-child {
								font-size: 20px;
							}

							&:last-child {
								font-size: 17px;
							}
						}
					}

					&:last-child {
						color: #c8c7cc;
						font-size: 14px;
					}
				}
			}

			&:last-child {
				>image {
					width: 25vw;
					height: 20vw;
					margin-bottom: .5vh;
				}

				>view {
					color: #c8c7cc;
					text-align: right;

					&::before {
						content: '浏览量:'
					}
				}
			}
		}
	}
}
</style>
